<template>
  <router-view class="page-transition" />
  <!-- 预渲染命令面板 - 使用v-show而非v-if，确保即时响应 -->
  <CommandPalette :is-open="commandPaletteOpen" @close="commandPaletteOpen = false" />
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useStore } from 'vuex'
import { ElNotification } from 'element-plus'
import CommandPalette from '@/components/CommandPalette.vue'
import { useNetworkMonitor } from '@/utils/networkMonitor'

const store = useStore()

// 命令面板状态
const commandPaletteOpen = ref(false)

// 🚀 P0网络修复：集成网络监控
const { networkStatus, getConnectionDescription, isHealthy } = useNetworkMonitor()

// 处理全局键盘快捷键
const handleGlobalKeydown = (event: KeyboardEvent) => {
  // Cmd/Ctrl + K 打开命令面板
  if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
    event.preventDefault()
    commandPaletteOpen.value = !commandPaletteOpen.value
  }
}

// 🚀 P0网络修复：网络状态变化监听
const handleNetworkStatusChange = () => {
  const description = getConnectionDescription()

  if (!networkStatus.isOnline) {
    ElNotification({
      title: '网络连接断开',
      message: '请检查您的网络连接',
      type: 'warning',
      duration: 5000
    })
  } else if (networkStatus.failedRequests >= 3) {
    ElNotification({
      title: '网络连接不稳定',
      message: `与服务器连接不稳定 (${networkStatus.failedRequests}次失败)`,
      type: 'warning',
      duration: 5000
    })
  } else if (networkStatus.failedRequests > 0 && networkStatus.failedRequests < 3) {
    // 网络恢复通知
    ElNotification({
      title: '网络连接已恢复',
      message: description,
      type: 'success',
      duration: 3000
    })
  }
}

onMounted(() => {
  // 应用启动时从localStorage恢复登录状态
  store.dispatch('auth/restoreAuth')
  // 添加全局键盘监听
  document.addEventListener('keydown', handleGlobalKeydown)

  // 🚀 P0网络修复：启动网络监控 (已禁用)
  // console.log('🌐 启动网络监控系统')

  // 监听网络状态变化 (已禁用)
  /*
  const checkInterval = setInterval(() => {
    if (networkStatus.failedRequests > 0) {
      handleNetworkStatusChange()
    }
  }, 10000) // 每10秒检查一次

  // 保存定时器引用以便清理
  ;(window as any)._networkCheckInterval = checkInterval
  */
})

onUnmounted(() => {
  // 清理全局键盘监听
  document.removeEventListener('keydown', handleGlobalKeydown)

  // 🚀 P0网络修复：清理网络监控 (已禁用)
  /*
  if ((window as any)._networkCheckInterval) {
    clearInterval((window as any)._networkCheckInterval)
    delete (window as any)._networkCheckInterval
  }
  */
})
</script>

<style>
/* 导入苹果风格设计系统 */
@import './assets/styles/aperture-design-system.css';

/* 全局视口修复 - 彻底消除"那片白" */
html, body, #app {
  margin: 0;
  padding: 0;
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
}

/* 应用程序根元素 - 苹果风格高质量背景 */
#app {
  font-family: var(--aperture-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* 苹果风格高质量背景 - 替换刺眼的紫色渐变 */
  background:
    /* 基础渐变 - 模拟高质量壁纸的感觉 */
    radial-gradient(ellipse at 20% 50%, rgba(120, 119, 198, 0.3), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(255, 182, 193, 0.2), transparent 50%),
    radial-gradient(ellipse at 40% 20%, rgba(250, 219, 216, 0.2), transparent 50%),
    /* 柔和的基础色 */
    linear-gradient(135deg, #e0e7ff 0%, #f0f4ff 25%, #fef7f0 75%, #fffaf0 100%);
  background-attachment: fixed;
  position: relative;

  /* 整体色调调整 - 更加柔和的蓝紫色调 */
  filter: saturate(0.8) brightness(1.02);
}

/* 苹果风格：极简的背景，无需动画 */

/* 确保内容在背景之上 */
.page-transition {
  position: relative;
  z-index: 1;
}

/* 兼容性类名 - 平滑过渡 */
.medical-system {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #333;
}

.content-container {
  padding: 24px;
  background-color: var(--uc-bg-secondary);
  border-radius: 16px;
  box-shadow: var(--uc-shadow-sm);
  min-height: calc(100vh - 80px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-title {
  font-size: 32px;
  font-weight: 600;
  color: var(--uc-text-primary);
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--uc-border-primary);
  letter-spacing: 0.2px;
}

/* 表单样式 */
.form-container {
  max-width: 600px;
  margin: 0 auto;
}

.form-title {
  text-align: center;
  font-size: 32px;
  color: var(--uc-text-primary);
  margin-bottom: 32px;
  font-weight: 600;
  letter-spacing: 0.1px;
}

/* 表格样式 */
.table-container {
  background: var(--uc-bg-secondary);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--uc-shadow-sm);
}

/* 分页样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* 兼容旧样式名的上传组件 */
.upload-container {
  border: 2px dashed var(--uc-border-primary);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  background-color: var(--uc-bg-secondary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.upload-container:hover {
  border-color: var(--uc-accent-primary);
  background-color: rgba(0, 122, 255, 0.1);
  transform: scale(1.01);
}

.upload-icon {
  font-size: 48px;
  color: var(--uc-text-tertiary);
  margin-bottom: 16px;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.upload-text {
  font-size: 16px;
  color: var(--uc-text-secondary);
  margin-bottom: 8px;
}

.upload-hint {
  font-size: 14px;
  color: var(--uc-text-tertiary);
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .upload-container:hover {
    background-color: rgba(10, 132, 255, 0.15);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-container {
    padding: 16px;
    margin: 12px;
  }

  .form-container {
    max-width: 100%;
  }

  .page-title {
    font-size: 24px;
    margin-bottom: 16px;
  }
}

/* 页面过渡动画 */
.page-transition {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-transition-enter-active {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 480px) {
  .content-container {
    padding: 12px;
    margin: 8px;
  }

  .form-title {
    font-size: 24px;
    margin-bottom: 24px;
  }
}

/* 通用动画类 */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

.slide-up {
  animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.scale-in {
  animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
</style>